<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>网页实时视频 - 示例</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://static.jimicloud.com/player.min.css" />
<script type="text/javascript" src="http://static.jimicloud.com/player.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
	<div class="col-xs-12 col-md-offset-3 col-md-6">
		<div id="player" class="prism-player"></div>
	</div>
</div>
<div class="row">
	<div class="col-xs-12 col-md-offset-3 col-md-6">
	<div class="panel panel-default">
    <div class="panel-body">
    <form class="form-horizontal">
   		<div class="form-group">
			<div class="col-sm-4">
				<input id="devKey" type="text" class="form-control" placeholder="devKey" value="cd15d1aba85346128811ae17fc2a2378"/>
			</div>
			<div class="col-sm-4">
				<input id="devSecret" type="text" class="form-control" placeholder="devSecret" value="4a316af2e6874c03845bb391a04eae14"/>
			</div>
			<div class="col-sm-4">
				<input id="uuid" type="text" class="form-control" placeholder="uuid" value="123456789123456"/>
			</div>
   		</div>
   		<div class="form-group">
   			<div class="col-sm-8">
				<input id="startCmd" type="text" class="form-control" placeholder="开始指令: start" value='{"cmd":256}'/>
			</div>
			<div class="col-sm-4">
				<button id="start" type="button" class="btn btn-primary">开始</button>
			</div>
   		</div>
   		<div class="form-group">
   			<div class="col-sm-8">
				<input id="switchCameraCmd" type="text" class="form-control" placeholder="切换摄像头指令: switchcamera"/>
			</div>
			<div class="col-sm-4">
				<button id="switchCamera" type="button" class="btn btn-success">切换摄像头</button>
			</div>
   		</div>
   		<div class="form-group">
   			<div class="col-sm-8">
				<input id="stopCmd" type="text" class="form-control" placeholder="停止指令: stop" value='{"cmd":257}'/>
			</div>
			<div class="col-sm-4">
				<button id="stop" type="button" class="btn btn-danger">停止</button>
			</div>
   		</div>
    </form>
    </div>
	</div>
	</div>
</div>
</div>
<script>
var ctx = '${request.contextPath}'; // 实时视频服务器主机地址
var devKey = '69dcc204c82e4861a7a763c6bb3f4b96', devSecret = 'fcb0f7e8ec9e4ed89d632240f4e1b8b9'; //私密口令, 为了演示方便放在前端, 实际使用时切勿传至页面
var uuid = '866146038691063', appId = '0f7e8ec9e4e240f4e1b8b9';
function createPlayer(id, source){
	return  new JIMIPlayer({
		id: id, // 播放器容器ID
		width: '100%', height: '350px',// 宽, 高设置
		autoplay: !!source, // 播放器是否自动播放，在移动端autoplay属性会失效, Safari11不会自动开启自动播放
		source: source, // 视频播放地址url
		cover: ctx + '/images/cover.png', // 播放器默认封面图片，请填写正确的图片url地址，Flash播放器封面也需要开启允许跨域访问
	});
}
// 此方法为开发者业务服务器方法, 为了演示方便放在前端. 网页指令发送流程: 开发者页面 - > 开发者服务器接口  -> 本站服务器接口
function sendInstruction(data){
	var url = ctx + '/api?ver=2&for=web&method=sendInstruction&proNo=128';
	data.devKey = $('#devKey').val();
	data.devSecret = $('#devSecret').val(); 
	data.uuid = $('#uuid').val();
	data.appId = appId;
	var obj = {code:-1, msg:'系统错误'};
	$.ajax({url:url, data:data, async:false, success:function(ret){obj = ret;}, dataType:'json'});
	return obj;
}
var CMD = {
	start: function (){
		var data = {cmd: $('#startCmd').val(), isw:3}
		return sendInstruction(data);
	}, 
	stop: function (){
		var data = {cmd: $('#stopCmd').val(), isw:0}
		return sendInstruction(data);
	},
	switchcamera: function (){
		var data = {cmd: $('#switchCameraCmd').val(), isw:0}
		return sendInstruction(data);
	}
}
function start(){
	var obj = CMD.start();
	if (0 == obj.code){
		var data = obj.data;
		var pullUrl = data.pullURL + data.token;
		createPlayer('player', pullUrl);
	} else{
		alert(obj.msg);
	}
}
function switchCamera(){
	CMD.switchcamera();
}
function stop(){
	createPlayer('player', null);
	CMD.stop();
}
$(function (){
	createPlayer('player', null);
	$('#start').click(start);
	$('#switchCamera').click(switchCamera);
	$('#stop').click(stop);
});
</script>
</body>
</html>